<template>
  <div class="container">
    <div class="content-wrapper">
      <div class="nav">
        <router-link to="/dashboard/dash" class="nav-link"><span>首页</span></router-link>
        <router-link :to="{ 
          name: 'Dashboard', 
          params: { 
            standardName: standardName 
          }
        }" class="nav-link">
          <span>/</span><span>{{ standardName }}</span>
        </router-link>
        <router-link :to="{
          name: 'project-manage',
          params: {
            param: staId,
            standardName: standardName,
            projectName: projectName
          }
        }" class="nav-link">
          <span>/</span><span>{{ projectName }}</span>
        </router-link>
        <span>/</span><span class="current-page">模块选择</span>
        <div class="nav-back">
          <el-button type="text" @click="handleBack">
            <i class="el-icon-arrow-left"></i> 返回
          </el-button>
        </div>
      </div>

      <h1 class="title">请选择您要处理的模块</h1>
      <div class="button-group">
        <button 
          v-for="(label, key) in modules" 
          :key="key"
          @click="handleClick(label)"
          class="module-button"
        >
          <i :class="moduleIcons[label]"></i>
          <span>{{ label }}</span>
        </button>
      </div>
      <p class="selected-text" v-if="selectedModule">
        当前选择：{{ selectedModule }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projectId: '',
      staId: '',
      standardName: '',
      projectName: '',
      selectedModule: "",
      modules: ['人员', '设备', '规程'],
      moduleIcons: {
        '人员': 'el-icon-user',
        '设备': 'el-icon-monitor',
        '规程': 'el-icon-document'
      }
    };
  },
  created() {
    // 优先使用路由参数，如果没有则使用localStorage中存储的值
    const { param, projectName, standardName, staId } = this.$route.params;
    
    this.projectId = param || localStorage.getItem('projectId');
    this.projectName = projectName || localStorage.getItem('projectName') || '未知项目';
    this.standardName = standardName || localStorage.getItem('standardName') || '未知标准';
    this.staId = staId || localStorage.getItem('staId');
    
    // 存储当前值到localStorage
    if (param) localStorage.setItem('projectId', param);
    if (projectName) localStorage.setItem('projectName', projectName);
    if (standardName) localStorage.setItem('standardName', standardName);
    if (staId) localStorage.setItem('staId', staId);

    console.log("接收到的参数:", {
      projectId: this.projectId,
      projectName: this.projectName,
      standardName: this.standardName,
      staId: this.staId
    });
  },
  methods: {
    handleClick(moduleName) {
      console.log('Attempting to navigate to module:', moduleName);
      this.selectedModule = moduleName;
      
      const routeMap = {
        '人员': 'people',
        '设备': 'equip_manage',
        '规程': 'way_manage'
      };
      
      const routeName = routeMap[moduleName];
      
      if (routeName) {
        this.$router.push({
          name: routeName,
          params: {
            param: this.projectId,
            projectName: this.projectName,
            standardName: this.standardName,
            staId: this.staId
          }
        });
      } else {
        console.warn(`未知的模块名称: ${moduleName}`);
      }
    },
    handleBack() {
      this.$router.push({
        name: 'project-manage',
        params: {
          param: this.staId,
          standardName: this.standardName
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #f5f7fa;
  padding-top: 80px;
}

.content-wrapper {
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 800px;
}

.title {
  color: #2c3e50;
  font-size: 28px;
  margin-bottom: 40px;
  font-weight: 600;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.module-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 40px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #20b2aa, #2ed1c9);
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 160px;
}

.module-button i {
  font-size: 24px;
  margin-bottom: 8px;
}

.module-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(32, 178, 170, 0.4);
}

.module-button:active {
  transform: translateY(1px);
}

.selected-text {
  margin-top: 30px;
  color: #666;
  font-size: 16px;
}

@media (max-width: 768px) {
  .content-wrapper {
    width: 90%;
    padding: 20px;
  }

  .module-button {
    width: 100%;
    min-width: unset;
  }
}
.nav {
  position: relative;
  background-color: #f0f0f0;
  padding: 10px 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav a {
  color: #409EFF;
  text-decoration: none;
}

.nav a:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.nav span {
  color: #606266;
}

.nav-back {
  position: absolute;
  right: 20px;
}

.nav-back .el-button {
  font-size: 14px;
  padding: 0;
}

.nav-back .el-button i {
  margin-right: 4px;
}

.nav {
  padding: 20px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-bottom: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-link {
  text-decoration: none;
  color: #909399;  /* 非当前页面使用灰色 */
  font-size: 16px;
  transition: color 0.3s;  /* 添加颜色过渡效果 */
}

.nav-link:hover {
  color: #409EFF;  /* 鼠标悬停时变为蓝色 */
}

.nav span {
  color: #909399;  /* 分隔符使用灰色 */
  font-size: 16px;
  margin: 0 5px;
}

.current-page {
  color: #409EFF !important;  /* 当前页面使用蓝色 */
  font-weight: 500;  /* 当前页面加粗 */
}
</style>
